<template>
	<view class="control" v-if="venueDetail.id">
		<view class="box-1">
			<!-- <u-swiper :list="homeData" keyName="banner_image" height="540rpx"></u-swiper> -->
			<u-swiper :list="homeData" height="400rpx"></u-swiper>
			<view class="postion">
				<view class="box-1-con">
					<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				</view>
			</view>
		</view>
		<view class="box-list">
			<view class="data-list2">
				<view class="section-2">
					<view style="padding-left: 30rpx;font-weight: bold;color: #333333;">
						{{venuelits.venue_name}}
					</view>
					<view class="tag-list">
						<u-tag v-for="(item2,index2) in cateslist" :key="index2" :text="item2.name" type="warning"
							:bgColor="'#ec46f633'" :borderColor="'rgba(0,0,0,0)'" :color=" '#ec46f6'" />
					</view>
				</view>
				<view class="" style="width: 100%;height: 2rpx;background-color: #e5e5e5;margin-top: 20rpx;"></view>
				<view class="section-2">
					<view style="width: 70%;height: 100rpx;float: left;">
						<view
							style="padding-left: 30rpx;font-size: 26rpx;line-height: 60rpx;font-weight: 500;color: #333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
							@click="addresslist">
							{{venuelits.address}}
						</view>
						<!-- <view
							style="padding-left: 30rpx;font-size: 24rpx;line-height: 23rpx;font-weight: 500;color: #bebebe;margin-top: 20rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
							@click="addresslist">
						</view> -->
					</view>
					<view style="width: 30%;height: 100rpx;float: right;">
						<view class="" style="width: 40%;height: 100rpx;float: left;">
							<image style="width: 30rpx;height: 38rpx;margin-top: 16rpx;margin-left: 20rpx;"
								@click="addresslist"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3586ab531c86cbc5e1cd70d0206ef35afac9c23e.png"
								mode=""></image>
						</view>
						<view class="" style="width: 10%;height: 100rpx;float: left;">
							<view style="width: 2rpx;height: 70rpx;background-color: #e5e5e5;"></view>
						</view>
						<view class="" style="width: 40%;height: 100rpx;float: right;">
							<image style="width: 30rpx;height: 38rpx;margin-top: 16rpx;" @click="selectClick"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5f411eff61733b119ac1b059b0160d14fec0301a.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #e1e1e1;">

		</view>

		
		<view class="box-222">
			<!-- <scroll-view class="footer-3" scroll-x> -->
				<!-- <view class="flex-align"> -->
				
				<u-tabs :list="venueDetaillist" lineColor="#2F75FA " :activeStyle="{
					  color: '#2F75FA ',
					}" :inactiveStyle="{
					  color: '#c2c1c1',
					}" :lineWidth="30"  @click="data_specss" />
					<!-- :current="currentTab"  tabs 属性，暂时注释-->
				<!-- </view> -->
			<!-- </scroll-view> -->
		</view>
		<!-- <view class="box-222">
			<scroll-view class="footer-3" scroll-x>
				<view class="flex-align">
				
					<u-tag v-for="(item2,index2) in venueDetaillist" :key="index2" :text="item2.name" type="warning"
						:bgColor="
							  data_name.indexOf(item2) > -1
							    ? 'rgba(47, 117, 250, 0.9)'
							    : '#EFEFEF'
							" :borderColor="
							  data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
							" :color="data_name.indexOf(item2) > -1 ? '#ffffff' : '#333'" @click="data_specss(item2,index2)" />
				</view>
			</scroll-view>
		</view> -->
		<view class="box-2">
			
			<view class="data-list1" v-if="catelist_belong == 'ticket'">
				<scroll-view scroll-y="true" class="scroll" v-if="detail.list.length != 0">
					<navigator :url="
						  '/page_venues/pages/venuesDetail/ticketModule/ticketModule' +
						  '?id=' +
						  item.id +
						  '&venue_name=' +
						  venueDetail.venue_name +
						  '&venue_id=' +
						  venueDetail.id 
						" class="data-item flex-align" v-for="(item, index) in detail.list" :key="index">
						<view class="image">
							<u--image :src="item.picture" width="211rpx" height="248rpx" radius="5"></u--image>
						</view>
						<view class="detail">
							<view>
								<view class="title ellipsis-1"><text style="font-size: 30rpx;color: #ffaa00"
										v-if="item.inventory == 0">预约</text><text style="margin-left: 10rpx;">
										{{ item.name }}</text> </view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view>
								<view v-if="item.is_yxq != 0">
									<view class="info ellipsis-1"
										style="font-size: 26rpx;margin-top: 30rpx;color: #ffaa00;font-weight: bold;"
										v-if="item.is_days == 1">{{item.days}}天</view>
									<view class="info ellipsis-1"
										style="font-size: 26rpx;margin-top: 30rpx;color: #ffaa00;font-weight: bold;"
										v-else>{{item.specify}}</view>
								</view>
							</view>
							<view class="flex-between">
								<!-- <view class="price">￥{{ item.selling_price }}</view> -->
								<price :value="item.selling_price" :color="'#ff4105'"></price>
								<view class="price-2" style="text-decoration: line-through">￥{{ item.lineation }}</view>
								<!-- <view class="price-2">已售：{{ item.actual + item.volume }}张</view> -->
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.volume >= item.sale_num">已售：{{item.volume}}</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.volume < item.sale_num">已售：{{item.sale_num}}</view>
							</view>
						</view>

					</navigator>
					<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
						:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" />
				</scroll-view>
			</view>
			<!-- 会员办卡 -->
			<view class="data-list2" v-if="catelist_belong == 'card'">
				<scroll-view scroll-y class="scroll"  v-if="detail.list.length != 0">
					<navigator :url=" '/page_venues/pages/venuesDetail/memberCard/memberCard' + '?id=' + item.id +
						  '&venue_name=' +
						  venueDetail.venue_name +
						  '&venue_id=' +
						  venueDetail.id
						" class="data-item flex-align" v-for="(item, index) in detail.list" :key="index">
						<view class="image">
							<u--image :src="item.picture" width="289rpx" height="183rpx" radius="5"></u--image>
						</view>

						<view class="detail">
							<view>
								<view class="title ellipsis-1">{{ item.name }}</view>
								<view class="tag-list flex-align">
									<view class="tag" v-for="(tagItem, tagIndex) in item.venues_project"
										:key="tagIndex">{{ tagItem.name }}</view>
								</view>
								<!-- <view class="tiemr ellpisis-1">经常事件：2015/12/20</view> -->
								<!-- 计次卡 -->
								<view class="tiemr ellpisis-1"
									style="font-size: 26rpx;margin-top: 20rpx;color: #ffaa00;font-weight: bold;"
									v-show="item.type == 1">{{ item.times }}次 <text v-show="item.gifts != ''">
										+{{ item.gifts }}次</text></view>
								<!-- 金额卡 -->
								<view class="tiemr ellpisis-1"
									style="font-size: 26rpx;margin-top: 20rpx;color: #ffaa00;font-weight: bold;"
									v-show="item.type == 3">{{ item.times }}元<text v-show="item.gifts != ''">
										+{{ item.gifts }}元</text></view>
								<!-- 时间卡 -->
								<view class="tiemr ellpisis-1"
									style="font-size: 26rpx;margin-top: 20rpx;color: #ffaa00;font-weight: bold;"
									v-show="item.type == 2">{{ item.times }}天<text v-show="item.gifts != ''">
										+{{ item.gifts }}天</text></view>
							</view>
							<view class="flex-align">
								<view class="flex-align">
									<!-- <view class="price">￥{{ item.selling_price }}</view> -->
									<price :value="item.selling_price" :color="'#ff4105'"></price>
									<view class="price-2" style="text-decoration: line-through">￥{{ item.lineation }}
									</view>
								</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.sale_num <= item.volume">销量：{{item.volume}}
								</view>
								<view style="margin-left:auto;color: #cfcfcf;font-size: 24rpx;"
									v-if="item.sale_num > item.volume">销量：{{item.sale_num}}
								</view>
							</view>
						</view>
					</navigator>
					<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
						:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" />
				</scroll-view>
			</view>

			<!-- 场地预约 -->
			<view class="data-list" v-if="catelist_belong == 'court'">
				<scroll-view scroll-y class="scroll" v-if="detail.list.length != 0">
					<view @click="cdClick(item)" class="data-item flex-between" style="margin-top: 20rpx;"
						v-for="(item, index) in detail.list" :key="index">
						<view class="flex-align" style="height: 100%">
							<view class="image">
								<image mode="aspectFill" :src="item.show_img"></image>
							</view>

							<view class="detail">
								<view class="title">{{item.court_name}}</view>
								<view>
									<view class="tag-list flex-align" v-if="item.venues_project != ''">
										<!-- <view class="tag" v-for="(im, ix) in item.venues_project" :key="index" >{{im.name}}</view> -->
										<view v-if="item.venues_project[0].name != undefined" class="tag">
											{{item.venues_project[0].name}}
										</view>
										<view v-if="item.venues_project[1].name != undefined" class="tag">
											{{item.venues_project[1].name}}
										</view>
										<view v-if="item.venues_project[2].name != undefined" class="tag">
											{{item.venues_project[2].name}}
										</view>
										<view v-if="item.venues_project[3].name != undefined" class="tag">
											{{item.venues_project[3].name}}
										</view>
									</view>
									<view class="detail-info" v-if="item.dtPrice != ''">￥{{item.min_price}}/起
									</view>
									<!-- <view class="detail-info">￥30.00~50.00</view> -->

								</view>
							</view>
						</view>

						<view class="btn">去预约</view>
					</view>
					<!-- </navigator> -->
				</scroll-view>
			</view>

			<!-- 培训报班 -->
			<view class="data-list5" v-if="catelist_belong == 'train'">
				<scroll-view scroll-y class="scroll" v-if="detail.list.length != 0">
					<navigator :url="
              '/pages_other/train/train' +
              '?id=' +
              item.id +
              '&venue_name=' +
              venueDetail.venue_name +
              '&venue_id=' +
              venueDetail.id+
              '&train_enum_id=' +
              item.train_enum_id
            " class="goods-item flex-align" v-for="(item, index) in detail.list" :key="index">
						<view class="image">
							<u--image width="100%" height="100%" :src="item.cover"></u--image>
							<view class="image-info">{{item.sold_num}}人已报名</view>
							<view class="tag1" v-if="item.train_enum_id == 1">短训</view>
							<view class="tag2" v-if="item.train_enum_id == 2">长训</view>
							<view class="tag3" v-if="item.train_enum_id == 3">小班</view>
						</view>
						<view class="detail">
							<view>
								<view class="title elipsis-1">{{ item.name }}</view>
								<view class="detail-1 flex-align">
									<view class="tag" style="color: #fff;"
										v-for="(items, indexs) in item.venues_project" :key="indexs">{{ items.name }}
									</view>
								</view>
							</view>
							<view class="flex-align">
								<view class="price">￥<text>{{ item.price_selling
                    }}<text style="font-size: 20rpx">起</text></text></view>
								<!-- <view class="info">{{ item.classNum }}节课</view> -->
							</view>
						</view>
					</navigator>
					<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
						:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" />
				</scroll-view>
			</view>


			<!-- 赛事报名 -->
			<view class="data-list9" v-if="catelist_belong == 'enroll'">
				<scroll-view scroll-y class="scroll" v-if="detail.list.length != 0">
					<navigator :url="'/pages/race/race'+'?id=' + item.id +
              '&cate_type=' +
              item.cate_type+
              '&venue_name=' +
              venueDetail.venue_name +
              '&venue_id=' +
              venueDetail.id+
              '&windows=' +
              item.windows" class="data-item" v-for="(item, index) in detail.list" :key="index">

						<view class="image">
							<u--image :src="item.show_img" radius="7" width="100%" height="220rpx"></u--image>
							<view class="top-tag">自定义</view>
						</view>
						<view class="title"> {{ item.race_name }} </view>
						<view class="count-down flex-between" style="color: rgb(190,190,190);
  font-size: 22rpx;">
							<text>{{ item.subtitle }}</text>

						</view>
					</navigator>
					<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
						:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" />
				</scroll-view>
			</view>

			<view v-if="detail.list.length === 0" style="position: absolute;top: 0rpx; left: 30%;">
				<u-empty mode="list" text="暂无类目,看看其他商品吧~"
					icon="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/637257a18b233da5ee6f77e1f4198e5875b9574d.png">
				</u-empty>
			</view>

		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			QSNavbar,
			uniRate,
		},
		data() {
			return {
				status: "loading",
				detail: {
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				page: 1,
				cateslist: [{
						id: 74,
						name: "游泳"
					},
					{
						id: 75,
						name: "健身"
					}
				],
				scc: '田径',
				data_name: [],
				homeData: [],
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				list1: [],
				venueDetail: {},
				timeData: {},
				menuActive: 0,
				products: [],
				id: 0,
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				index_list: {},
				venuelits: {},
				catelist_belong: '',
				isLoading: false, // 加载状态标记
			};
		},
		computed: {
			filterTab() {
				if (this.detail.hiddenTab) {
					let data = this.detail.tabList.slice(0, 4);
					data.push({
						icon: this.$https.assetsPath +
							"6bdbf4f1d1e68a2f393b2e9392d4ebf3c38d1356.png",
						name: "更多",
						id: -1,
					});

					return data;
				} else {
					return this.detail.tabList;
				}
			},
		},
		onLoad(options) {
			this.id = options.id;
			this.getVenueDetail(options.id);
			this.getRecommendVenueDetail(options.id)

		},
		methods: {
			// 获取推荐场馆信息
			async getRecommendVenueDetail(id) {
				// uni.showLoading({
				// 	title: "加载中",
				// });
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					venue_id: id
				};
				let result = await venues.getRecommendVenueDetail(postData);
				if (result.code === 1) {
					this.venuelits = result.data.result.venue
					this.cateslist = result.data.result.projects.slice(0,3)
					this.homeData = result.data.result.venue.banner
				}
			},
			// onClickTab(index,item){
			// },
			data_specss(item2, index2) {
				if (this.isLoading) {
					return; // 如果正在加载，则忽略点击
				}
				this.isLoading = true; // 设置加载状态为true
				// this.menuActive = index2;
				this.menuActive = item2.index
				this.menuActive = item2.index
				
				this.xiaoqu = true
				this.class_id = item2.id
				this.elseStock = 0
				this.products = []
				this.data_name = []
				let data_name = []
				this.venueDetaillist.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.venueDetaillist.map((item, index) => {
					item.checked = index === item2.index ? true : false
				})
				this.catelist_belong = item2.belong
				this.page = 1;
				this.detail.list = [];
				this.status = "loading";
				this.getcatelist().finally(() => {
					this.isLoading = false; // 请求完成后无论成功还是失败都重置加载状态
				});
				// this.getcatelist()

			},
			// 获取场馆详情
			async getVenueDetail(id, index = 0) {
				let postData = {
					shop_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'top'
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetail = result.data;
					this.windows = result.data.windows
					this.getVenuelist();

				}
			},
			// 点击分类  会员办卡，票
			async getVenuelist() {
				let postData = {
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'window',
					windows: this.windows
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					this.venueDetaillist = result.data.windows;
					this.catelist_belong = this.venueDetaillist[0].belong
					if (this.belonglist.belong != '') {
						this.getcatelist()
					}
				}
			},
			// 产品接口
			async getcatelist() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.ordersList = [];
				let postData = {
					shop_id: this.id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					block: 'products',
					belong: this.catelist_belong,
					cate_id: 0,
					// page: this.listQuery.pageNo,
					// limit: this.listQuery.pageSize,
					limit: 15,
					page: this.page,
				};
				let result = await venues.getShopIndex(postData);
				if (result.code === 1) {
					// that.products = that.products.concat(result.data.products.data); //将数据拼接在一起
					// that.totalPage = result.data.products.last_page
					if (this.detail.list.length < 1) {
						this.detail.list = result.data.products.data;
					} else {
						this.detail.list.push(...result.data.products.data);
					}
						this.status = "loadmore";
						
						//设置tab
						if (this.detail.tabList.length < 1) {
							this.detail.tabList = result.data.products.data;
							if (this.detail.tabList.length > 5) {
								this.detail.hiddenTab = true;
							}
						}
						
						if (result.data.products.data.length < 10) {
							this.status = "nomore";
						}
						
						
						let array = [1, 2, 3, 4, 5, 5, 5, 5];
						let newArray = [];
						array.forEach((item,index) =>{
							if (newArray.indexOf(array[index]) == -1) {
								newArray.push(array[index]);
							}
						})
						// for (let i = 0; i < array.length; i++) {
						//  if (newArray.indexOf(array[i]) == -1) {
						//  	newArray.push(array[i]);
						// 	}
						// }
				}
			},
			loadNewsList() {
				this.status = "loading";
				this.page += 1;
				this.getcatelist();
			},
			search(val) {
				this.page = 1;
				this.detail.list = [];
				this.status = "loading";
				this.getcatelist(val);

			},
			// 滚动加载
			// onReachBottom() {
			// 	uni.showLoading({
			// 		title: '加载中'
			// 	});
			// 	if (this.totalPage <= this.listQuery.pageNo) {
			// 		uni.hideLoading();
			// 		uni.showToast({
			// 			title: '没有更多了',
			// 			duration: 2000,
			// 			icon: 'none'
			// 		});
			// 		return
			// 	}
			// 	this.listQuery.pageNo += 1;
			// 	let belong = this.belonglist.belong
			// 	this.getcatelist()
			// },
			// 之前详情
			openStoreDetail() {
				uni.navigateTo({
					url: "/page_venues/pages/venuesDetail/storeDetail/storeDetail",
				});
			},
			onChange(e) {
				this.timeData = e;
			},
			openDetail() {
				uni.navigateTo({
					url: "/pages/index/coach/coachDetail",
				});
			},
			cdClick(item) {
				var _this = this
				var now = new Date()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				this.time_list = h + ':' + min
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: item.id
				};
				train.getCourtProduct(data).then(result => {
					// this.each_num.open_time_end = result.data.result.open_time_end
					// this.each_num.open_time_start = result.data.result.open_time_start
					let open_time_end = result.data.result.open_time_end
					let open_time_start = result.data.result.open_time_start
					let tip = result.data.result.tip
					if (this.time_list > open_time_start && this.time_list < open_time_end) {
						// uni.navigateTo({
						// 	url: '/page_venues/pages/venuesDetail/stadium/stadium?pid=' + item.withCourt
						// 		.pid +
						// 		"&id=" +
						// 		item.id +
						// 		"&court_id=" +
						// 		item.court_id +
						// 		"&name=" +
						// 		item.name +
						// 		'&venueDetail=' +
						// 		this.venueDetail.id
						// })
						uni.navigateTo({
							url: '/page_venues/pages/venuesDetail/stadium/stadium?id=' + item.id +
								"&court_id=" +
								item.id +
								"&name=" +
								item.court_name +
								'&venue_id=' +
								this.venueDetail.id +
								'&windows=' +
								item.windows
						})
					} else {
						uni.showModal({
							// title: data[1],
							content: tip,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})

				// if (this.time_list > '08:00' && this.time_list < '24:00') {
				// uni.navigateTo({
				// 	url:'/page_venues/pages/venuesDetail/stadium/stadium?pid=' + item.withCourt.pid+
				//         "&id=" +
				//         item.id+
				//         "&court_id=" +
				//         item.court_id +
				// "&name=" +
				// item.name +
				//           '&venueDetail=' +
				//           this.venueDetail.id
				// })
				// }
			},
			selectClick() {
				uni.makePhoneCall({
					phoneNumber: this.venueDetail.phone
				})
			},
			addresslist() {
				// uni.navigateTo({
				// 	url:'/page_points/page_points/self_mention?address=' + this.venueDetail.address+
				//         "&lat=" + this.venueDetail.lat+ "&lng=" + this.venueDetail.lng
				// })
				uni.openLocation({
					latitude: Number(this.venueDetail.lat), //要去的纬度-地址
					longitude: Number(this.venueDetail.lng), //要去的经度-地址
					address: this.venueDetail.address, //要去的具体地址

					//此处踩坑的问题2：
					//latitude 和 longitude的值一定要是number类型。
					//所以传递的时候需要使用Number将其转换一下。
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		// min-height: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.box-1 {
		position: relative;
		width: 100%;

		>image {
			display: block;
			width: 100%;
		}

		.postion {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

		.box-1-con {
			image {
				display: block;
				width: 100%;
			}

			.box-1-dian {
				height: 120rpx;
				padding: 0px 30rpx;
				margin-top: 19rpx;

				.image {
					width: 160rpx;
					height: 100%;
					border-radius: 5px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.dian-info {
					margin-left: 20rpx;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;

					.title {
						color: rgb(255, 255, 255);
						font-size: 33rpx;
						font-weight: 700;
					}

					/deep/ .u-tag-wrapper {
						margin-right: 20rpx;

						.u-tag {
							border-radius: 17px;
							font-size: 26rpx;
							height: 40rpx;
							padding: 0px 15rpx;
						}
					}

					.desc {
						color: rgb(255, 255, 255);
						font-size: 22rpx;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 400rpx;
					}
				}

				.btn {
					color: rgb(255, 255, 255);
					background-color: rgb(254, 140, 97);
					border-radius: 23px;
					font-size: 24rpx;
					padding: 10rpx 30rpx;
					margin-top: 60rpx;
				}
			}
		}
	}

	.box-list {
		// padding: 0px 30rpx;
		padding: 0px 20rpx;
		// margin-left: 20rpx;
		flex: 0.3;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// transform: translateY(-60rpx);
		// margin-top: 50rpx;

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}

		//列表2
		.data-list2 {
			.section-2 {
				margin-top: 20rpx;

				.top-menu-list {
					display: flex;
					flex-wrap: wrap;

				}

				.sub-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.tag-list {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;
					white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

					/deep/.u-tag {
						margin-left: 10rpx;
						margin-top: 20rpx;
						height: 21px;
						line-height: 22px;
						padding: 0 10px;
					}
				}
			}


		}
	}

	.box-222 {
		// padding: 0px 30rpx;
		padding: 0 20rpx 20rpx 20rpx;
		// margin-left: 20rpx;
		flex: 0.1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		transform: translateY(-60rpx);
		margin-top: 60rpx;

		.footer-3 {
			display: flex;
			margin-bottom: 30rpx;

			/deep/.u-tag {
				margin-left: 30rpx;
				margin-bottom: 30rpx;
			}
		}



		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}

		//列表2
		.data-list_s {
			.section-2 {
				margin-top: 30rpx;


				.tag-list {
					display: flex;
					flex-wrap: wrap;

					/deep/.u-tag {
						margin-left: 30rpx;
						margin-bottom: 30rpx;
					}

				}
			}

		}
	}

	.box-2 {
		// padding: 0px 30rpx;
		padding: 0px 20rpx;
		// margin-left: 20rpx;
		flex: 1;
		height: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		transform: translateY(-60rpx);
		// margin-top: 70rpx;

		>view {
			flex: 1;
			height: 0;

			.scroll {
				// height: calc(100% - 40rpx);
				height: 100%;
			}
		}

		// 列表1
		.data-list1 {
			.data-item {
				margin-top: 20rpx;
				height: 288rpx;
				width: 690rpx;
				background-color: #ffffff;
				padding: 10rpx;
				border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				border-radius: 6rpx;
				box-shadow: 30px 2px 10px #f9f9f9;

				.image {
					padding-left: 10rpx;
					width: 211rpx;
					height: 248rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 230rpx;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.tiemr {
						color: #cfcfcf;
						font-size: 22rpx;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #cfcfcf;
						font-size: 22rpx;
						text-decoration: line-through;
					}
				}
			}
		}

		//列表2
		.data-list2 {
			.section-2 {
				margin-top: 30rpx;

				.top-menu-list {
					display: flex;
					flex-wrap: wrap;

					.top-menu-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;
						// margin-top: 10rpx;
						padding: 0px 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.add_na {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 20%;
							// margin-top: 30rpx;
							padding: 0px 30rpx;
							box-sizing: border-box;
							font-size: 25rpx;

							.menu-image {
								width: 100rpx;
								height: 100rpx;
								// border-radius: 37rpx;
								// background: rgb(250, 237, 234);
								// background: linear-gradient(45deg,
								// 		rgba(250, 237, 234, 1) 0%,
								// 		rgba(246, 227, 216, 1) 77%);
								background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
								background-size: 100% 100%;
								// position: absolute;
								// top: 0;
								// right: 0;
								// z-index: 999;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.menu-image-no-checked {
								width: 100rpx;
								height: 100rpx;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.no-checked-text {
								margin-top: 20rpx;
								white-space: nowrap;
							}

							.checked-text {
								margin-top: 20rpx;
								white-space: nowrap;
								font-weight: bold;
							}
						}
					}
				}

				.sub-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.tag-list {
					display: flex;
					flex-wrap: wrap;

					/deep/.u-tag {
						margin-left: 30rpx;
						margin-bottom: 30rpx;
					}

					// .tag{
					// 	background: #EFEFEF;
					// 	border-radius: 3px;
					// 	font-size: 24rpx;
					// 	font-weight: 500;
					// 	color: #FFFFFF;
					// 	padding: 7rpx 20rpx;
					// 	margin-right: 20rpx;
					// 	margin-bottom: 20rpx;
					// }

				}
			}

			.data-item {
				// margin-top: 20rpx;
				height: 220rpx;
				padding: 10rpx;

				.image {
					width: 289rpx;
					height: 183rpx;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		.data-list {
			.data-item {
				height: 150rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;

				&:last-of-type {
					margin-bottom: 0;
					padding-bottom: 0;
				}

				.image {
					width: 150rpx;
					height: 100%;
					border-radius: 5px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					margin-left: 20rpx;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;

					.tag-list {
						margin-bottom: 20rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							color: white;
							background-color: #abc6fa;
							margin-right: 10rpx;
						}
					}

					.detail-info {
						color: rgb(255, 65, 5);
						font-size: 30rpx;
						font-weight: 700;

						&:first-of-type {
							margin-bottom: 7rpx;
						}
					}
				}

				.btn {
					border-radius: 8px;
					color: white;
					padding: 10rpx 25rpx;
					font-size: 25rpx;
					background-image: linear-gradient(0deg,
							rgb(47, 117, 250) 0%,
							rgb(82, 142, 255) 100%);
				}
			}
		}

		.data-list4 {
			.data-item {
				margin-top: 20rpx;
				height: 220rpx;
				padding: 10rpx;

				.image {
					width: 300rpx;
					height: 100%;
					position: relative;

					.tag {
						color: white;
						background-color: #abc6fa;
						padding: 5rpx 10rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						font-size: 20rpx;
						border-radius: 0px 0rpx 8rpx 0;
					}

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 25rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.count-down {
						height: 35rpx;

						.time {
							font-size: 20rpx;
							display: flex;

							text {
								color: #f63939;
								display: block;
								background-color: #fdc4c3;
								border-radius: 8rpx;
								width: 40rpx;
								text-align: center;
								margin: 0px 6rpx;

								&:first-of-type {
									margin-left: 0;
								}
							}
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.det {
						font-size: 22rpx;
						color: #999999;
					}

					.price {
						font-size: 32rpx;
						color: #ff4811;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}

		.data-list5 {
			.goods-item {
				height: 220rpx;
				margin-top: 30rpx;

				.image {
					width: 200rpx;
					height: 100%;
					border-radius: 7rpx;
					overflow: hidden;
					position: relative;

					/deep/ .u-transition {
						width: 100%;
						height: 100%;
					}

					.image-info {
						position: absolute;
						bottom: 0;
						width: 100%;
						left: 0;
						font-size: 24rpx;
						text-align: center;
						color: white;
						padding: 10rpx 0;
						background-color: rgba(0, 0, 0, 0.5);
					}

					.tag1 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 0px 0px 15rpx 0px;
						background-image: linear-gradient(to right, #528eff, #2f75fa);
					}

					.tag2 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 0px 0px 15rpx 0px;
						background-image: linear-gradient(to right, #43e090, #26cd78);
					}

					.tag3 {
						position: absolute;
						top: 0;
						left: 0;
						font-size: 23rpx;
						color: white;
						padding: 7rpx 15rpx;
						border-radius: 0px 0px 15rpx 0px;
						background-image: linear-gradient(to right, #ed7af4, #ec46f6);
					}
				}

				.detail {
					flex: 1;
					width: 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					margin-left: 30rpx;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.tag {
						font-size: 22rpx;
						// background-color: #f4f3f4;
						color: white;
						background-color: #abc6fa;
						border-radius: 8rpx;
						padding: 5rpx 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.detail-2 {
						color: #a3a3a3;
						font-size: 23rpx;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}

					.price {
						color: #ff6a42;

						text {
							font-weight: 700;
							font-size: 37rpx;
						}
					}

					.info {
						color: #a3a3a3;
						font-size: 23rpx;
						margin-left: 15rpx;
						transform: translateY(4rpx);
					}
				}
			}
		}

		.data-list6 {
			.item {
				width: 100%;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #e5e5e5;
				margin-top: 31rpx;

				&:nth-of-type(1) {
					.index {
						color: #ffa800;
					}
				}

				&:nth-of-type(2) {
					.index {
						color: #c0c0c0;
					}
				}

				&:nth-of-type(3) {
					.index {
						color: #b2786b;
					}
				}

				&:last-of-type {
					border: none;
				}

				.index {
					font-size: 36rpx;
					font-family: DIN;
					font-weight: bold;
					color: #95a0af;
					margin-right: 40rpx;
				}

				.con {
					height: 100%;
					flex: 1;
					display: flex;
				}

				.image {
					width: 130rpx;
					height: 100%;
					margin-right: 24rpx;
					position: relative;

					.small {
						width: 100%;
						height: 80rpx;
						position: absolute;
						bottom: -20rpx;
						left: 0;
					}
				}

				.box {
					flex: 1;
					width: 0;

					.info-1 {
						margin-bottom: 10rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
						}

						/deep/ .u-tag {
							height: 40rpx;
							margin-left: 20rpx;

							.u-tag__text {
								font-size: 20rpx;
							}
						}
					}

					.info-2 {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							font-weight: 400;
							color: #ff8f05;
							margin-left: 20rpx;
						}
					}

					.info-3 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						text-overflow: ellipsis;
					}

					.info-4 {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.data-list7 {
			.goods-tab {
				white-space: nowrap;

				.tabs {
					display: inline-block;
					margin-right: 20rpx;

					image {
						height: 90rpx;
						width: 90rpx;
					}

					view {
						font-size: 20rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 10rpx;
						text-align: center;
					}
				}
			}

			.goods-list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				justify-content: space-between;

				.item {
					border: 0px solid #e5e5e5;
					width: 48%;
					margin-bottom: 30rpx;

					.image {
						width: 100%;
						position: relative;
						background: #f3f3f3;
						border-radius: 5px 5px 0px 0px;
						height: 300rpx;

						.img {
							width: 80%;
						}

						.top {
							position: absolute;
							left: 0;
							top: -20rpx;
							width: 60rpx;
							height: 68rpx;
						}

						.bottom-text {
							position: absolute;
							right: 20rpx;
							bottom: 10rpx;
							font-size: 22rpx;
							z-index: 3;
							color: #bebebe;
						}
					}

					.bottom {
						border: 1px solid #e5e5e5;
						border-top: none;
						border-radius: 0 0 5px 5px;
						padding: 20rpx;

						.bootom-title {
							font-size: 26rpx;
							font-weight: bold;
							color: #333333;
							margin-bottom: 20rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: bold;
							color: #ff0f0f;
						}

						.price-2 {
							font-size: 22rpx;
							font-weight: bold;
							margin-left: 6rpx;
							text-decoration: line-through;
							color: #bebebe;
						}
					}
				}
			}
		}

		.data-list8 {
			.data-item {
				border-bottom: 1px solid #f2f2f3;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;

				&:last-of-type {
					margin-bottom: 0;
					border-bottom: 0;
				}

				.detail {
					flex: 1;
					width: 0;
					padding-right: 40rpx;

					.detail-1 {
						font-size: 28rpx;
						font-weight: 700;
						margin-bottom: 15rpx;
					}

					.detail-2 {
						font-size: 22rpx;
						color: #7c642a;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						background-color: #eedd9b;

						text {
							margin-left: 10rpx;
						}
					}

					.detail-3 {
						margin-left: 20rpx;
						font-size: 22rpx;
						color: #d2d2d2;
					}

					.detail-4 {
						margin-top: 20rpx;
						margin-bottom: 30rpx;
						display: flex;

						.tag {
							color: #ff4747;
							font-size: 22rpx;
							margin-right: 8rpx;
							border-radius: 8rpx;
							padding: 5rpx;
							border: 1px solid #ff4747;
						}
					}

					.detail-5 {
						font-size: 33rpx;
						color: #ff1616;
						font-weight: 700;
					}

					.detail-6 {
						font-size: 20rpx;
						margin-left: 5rpx;
					}
				}

				image {
					width: 240rpx;
					height: 240rpx;
					border-radius: 10px;
				}
			}
		}

		.data-list9 {
			margin-top: 20rpx;

			.data-item {
				margin-bottom: 30rpx;
				margin-top: 20rpx;

				.image {
					position: relative;

					.top-tag {
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 5px 0px 0 0;
						color: white;
						background-color: #abc6fa;
						font-size: 22rpx;
						padding: 5rpx 10rpx;
					}
				}

				.title {
					font-size: 30rpx;
					margin-top: 10rpx;
					// margin-bottom: 10rpx;
				}

				.count-down {
					height: 35rpx;

					.time {
						font-size: 20rpx;
						display: flex;

						text {
							color: #f63939;
							display: block;
							background-color: #fdc4c3;
							border-radius: 8rpx;
							width: 40rpx;
							text-align: center;
							margin: 0px 6rpx;

							&:first-of-type {
								margin-left: 0;
							}
						}
					}

					.price {
						font-size: 22rpx;
						color: #ff571c;

						text {
							font-size: 35rpx;
							font-weight: 700;
						}
					}
				}
			}
		}
	}
</style>
